<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员中心</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        #main {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: flex-start;
        }

        .left-container {
            width: 16vw;
            /* background-color: aliceblue; */
            text-align: center;

            div {
                width: 16vw;
                height: 6vh;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px #ddd solid;
            }

            .child {
                background-color: #f8f8f8;

                &:hover {
                    scale: 1.05 1.05;
                    cursor: pointer;
                }
            }
        }

        .right-container {
            background-color: white;
            width: 40vw;
            height: 80vh;

            h3 {
                color: green;
                margin-left: 1vw;
                line-height: 0;
            }
        }

        table {
            margin: 0 auto;
            text-align: center;

            border-collapse: collapse;
            width: 38vw;

            thead {
                background-color: #f7f7f7;
            }

            th,
            td {
                border: 1px #ddd solid;
            }

            td button {
                margin: auto 1px;
                background-color: #ff9900;
                border: none;
            }

            .product-info-td {
                display: flex;
                flex-direction: row;
                justify-content: left;
                align-items: center;

                img {
                    width: 7vw;
                    height: 10vh;
                }
            }
        }
    </style>
</head>

<body>
    <div id="new_header">
        <script>
            $("#new_header").load("header.html");
        </script>
    </div>
    <!-- 正文部分 -->
    <div id="main">
        <div class="left-container">
            <img src="imgs/svip_center.png" alt="">
            <div>
                <h3>订单中心</h3>
            </div>
            <div class="child" onclick="seeMyOrders()">我的订单</div>
            <div class="child">我的留言</div>
            <div>
                <h3>账户信息</h3>
            </div>
            <div class="child">个人资料</div>
            <div class="child">修改密码</div>
        </div>
        <div class="right-container">
            <h3>我的订单</h3>
            <hr>
            <table>
                <thead>
                    <th>订单类型</th>
                    <th>产品信息</th>
                    <th>订单金额</th>
                    <th>订单状态</th>
                    <th>操作</th>
                </thead>
                <tbody id="table_tbody">
                    <!-- <tr>
                        <td>旅游景点</td>
                        <td class="product-info-td"><img src="imgs/yiheyuan.png" alt="">颐和园</td>
                        <td>99</td>
                        <td>已付款</td>
                        <td><button>付款</button><button>撤销</button></td>
                    </tr> -->
                </tbody>
            </table>
        </div>
    </div>
    <script>
        function seeMyOrders() {
            console.log("----call seeMyOrders()-----");
            $.getJSON(
                'UserServlet',
                { methodName: "seeMyOrders" },
                function (result) {
                    // console.log(result);
                    for (var i = 0; i < result.length; i++) {
                        // console.log(result[i].id);
                        var $newtr = $("<tr></tr>");
                        $newtr.append($("<td>" + result[i].type + "</td>"));
                        $newtr.append($("<td class='product-info-td'><img src='"
                            + result[i].picture_url + "' alt=''>" + result[i].product_name + "</td>"));
                        $newtr.append($("<td>" + result[i].price + "</td>"));
                        if (result[i].status == 1) {
                            $newtr.append($("<td>已付款</td>"));
                        } else if (result[i].status == 0) {
                            $newtr.append($("<td>待付款</td>"));
                            $newtr.append($("<td><button onclick='pay("+result[i].id+")'>支付</button>"+
                                "<button onclick='revocation("+result[i].id+")'>撤销</button></td>"))
                        } else if (result[i].status == 2) {
                            $newtr.append($("<td>已取消</td>"));
                        }
                        $("#table_tbody").append($newtr);
                    }
                }
            );
        }

        //支付订单
        function pay(id){
            $.ajax({
                    url:"UserServlet",
                    type:"get",
                    data:"methodName=pay&id=" + id, 
                    success:function(result){
                        if($.trim(result) === "true"){
                            alert("操作成功");
                            location.reload();
                        }else{
                            alert("操作失败");
                        }
                    },
                    error:function(){
                        alert("出现错误");
                    }
                });
        }

        //撤销订单
        function revocation(id){
            $.ajax({
                    url:"UserServlet",
                    type:"get",
                    data:"methodName=revocation&id=" + id, 
                    success:function(result){
                        if($.trim(result) === "true"){
                            alert("操作成功");
                            location.reload();
                        }else{
                            alert("操作失败");
                        }
                    },
                    error:function(){
                        alert("出现错误");
                    }
                });
        }
    </script>
</body>

</html>